<template>
  <input type="text" v-model="info" />
  <button @click="showinfo">自定义事件</button>
  <hr />
  <div style="background-color: aqua; color: #fff">
    {{ mycount }}
    <span v-for="i in mycount" :key="i">{{ i }}&nbsp;</span>
  </div>

  <div>
    头部插槽
    <slot name="header"></slot>
  </div>
  <div>组件基础</div>
  <div style="color: aqua">{{ message }}</div>
  <div>{{ count }}</div>
  <hr />
  <div style="border: 1px solid blue">
    插槽的页面区域:
    <slot></slot>
  </div>

  <hr />

  <hr />
</template>

<script setup>
import { ref, computed } from 'vue'

//defineEmits就是自定义事件，父组件可以通过@自定义事件来监听
const info = ref('我是父组件传递的info')

const emits = defineEmits(['show-info'])

const showinfo = () => {
  console.log(info.value)
  //emits（‘自定义事件名称’，参数值...）用户触发自定义事件
  emits('show-info', info.value)
}

const props = defineProps(['message', 'count'])

const mycount = computed(() => {
  if (!props.count) {
    return 0
  }
  if (!isNaN(props.count)) {
    return parseInt(props.count)
  }
  return 0
})
</script>

<style scoped></style>
